<template>
	<div id="orderManage">
		<div class="breadcrumb">
			<img src="../../../../static/img/venueManage_1.png" class="head_img">
			<span class="title">订单管理</span>
		</div>
		<div class="search">
			<el-form :inline="true" class="demo-form-inline">
				<el-form-item label="预约时间">
					<el-date-picker v-model="bookDateStart" type="date" placeholder="选择日期" @change="changeBookDate">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="至">
					<el-date-picker v-model="bookDateEnd" type="date" placeholder="选择日期" @change="changeBookDate">
					</el-date-picker>
				</el-form-item>
				<br>
				<el-select v-model="venueId" placeholder="所有场馆" @change="changeVenueHandle">
					<el-option v-for="ven in venueLists" :label="ven.venueName" :value="ven.venueId" :key="ven.venueId"></el-option>
				</el-select>
				<el-select v-model="fieldId" placeholder="所有场地">
					<el-option v-for="field in fieldLists" :label="field.fieldName" :value="field.fieldId" :key="field.fieldId"></el-option>
				</el-select>
				<el-select class="smallIn" v-model="status" placeholder="所有状态">
					<el-option v-for="s in statusList" :label="s.name" :value="s.id" :key="s.id"></el-option>
				</el-select>
			</el-form>
			<el-button class="sel_btn" type="primary" @click="search">筛选</el-button>
		</div>
		<div class="list">
			<div class="list_head">
				<el-input class="largeIn" type='text' placeholder="请输入学号、教职工号、手机号或者订单号" icon="search" @keyup.enter.native="search" :on-icon-click="search"
				 v-model="keywords"></el-input>
			</div>
			<el-table :data="list" @row-click="selectDetail">
				<el-table-column prop="phone" label="手机号">
				</el-table-column>
				<el-table-column prop="userName" label="姓名">
				</el-table-column>
				<el-table-column prop="identity" label="身份">
				</el-table-column>
				<el-table-column prop="stuNo" label="学号/教职工号">
				</el-table-column>
				<el-table-column prop="orderCode" label="订单号" width="170">
				</el-table-column>
				<el-table-column prop="venueName" label="预约场馆">
				</el-table-column>
				<el-table-column prop="bookDate" label="预约时间">
				</el-table-column>
				<el-table-column prop="fieldName" label="预约场地">
				</el-table-column>
				<el-table-column prop="orderStatus" label="订单状态">
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination v-show="this.totalCount > 0" layout="prev, pager, next, jumper" :page-size="10" :current-page="currentPage"
				 :total="totalCount" @current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			return {
				list: [],
				totalCount: 0,
				statusList: [
					{ id: 0, name: "全部状态" },
					{ id: 1, name: "已消费" },
					{ id: 2, name: "待销费" },
					{ id: 3, name: "消费中" },
					{ id: 4, name: "已过期" },
					{ id: 5, name: "待支付" },
					{ id: 6, name: "已取消" }
				],
				venueLists: [{ venueId: 0, venueName: "全部场馆" }],
				fieldLists: [{ fieldId: 0, fieldName: "全部场地" }],
				bookDateStart: new Date(new Date().format("yyyy/MM/dd")),
				bookDateEnd: new Date(new Date().format("yyyy/MM/dd")),
				keywords: this.$util.getUrlParam("keywords") ? this.$util.getUrlParam("keywords") : "",
				venueId: this.$util.getUrlParam("venueId") ? parseInt(this.$util.getUrlParam("venueId")) : 0,
				fieldId: this.$util.getUrlParam("fieldId") ? parseInt(this.$util.getUrlParam("fieldId")) : 0,
				status: this.$util.getUrlParam("status") ? parseInt(this.$util.getUrlParam("status")) : 0,
				currentPage: this.$util.getUrlParam("currentPage") ? parseInt(this.$util.getUrlParam("currentPage")) : 1
			};
		},
		mounted() {
			this.bookDateStart = this.$util.getUrlParam("bookDateStart") ? this.$util.getUrlParam("bookDateStart") : new Date();
			this.bookDateStart = new Date(new Date(Number(this.bookDateStart)).format("yyyy/MM/dd"));
			this.bookDateEnd = this.$util.getUrlParam("bookDateEnd") ? this.$util.getUrlParam("bookDateEnd") : new Date();
			this.bookDateEnd = new Date(new Date(Number(this.bookDateEnd)).format("yyyy/MM/dd"));
			if (this.venueId != 0) {
				this.getFieldList(this.venueId);
			}
			this.getOrderList();
			this.getVenueList();
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			//订单列表
			getOrderList() {
				let url = this.$util.domain + "/erp/api/v20/venue/order/list";
				this.list = [];

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						size: 10,
						status: this.status,
						venueId: this.venueId,
						fieldId: this.fieldId,
						rootUnid: this.user.rootUnid,
						current: parseInt(this.currentPage),
						keywords: String(this.keywords).trimLeft(),
						bookDateEnd: this.bookDateEnd.format("yyyy-MM-dd"),
						bookDateStart: this.bookDateStart.format("yyyy-MM-dd")
					})
				}).then(response => {
					if (response.data.error == 10000) {
						let configList = response.data.data.data;
						this.totalCount = response.data.data.total;
						if (configList && configList.length > 0) {
							for (let i = 0; i < configList.length; i++) {
								let $index = i + 1,
									$phone = configList[i].phone,
									$userName = configList[i].name,
									$identity = configList[i].identity,
									$stuNo = configList[i].stuNo,
									$orderCode = configList[i].orderCode,
									$venueName = configList[i].venueName,
									$bookDate = configList[i].bookDate,
									$fieldName = configList[i].fieldName,
									$orderStatus = configList[i].orderStatus;
								if ($orderStatus == 1) {
									$orderStatus = "已消费";
								} else if ($orderStatus == 2) {
									$orderStatus = "待消费";
								} else if ($orderStatus == 3) {
									$orderStatus = "消费中";
								} else if ($orderStatus == 4) {
									$orderStatus = "已过期";
								} else if ($orderStatus == 5) {
									$orderStatus = "待支付";
								} else if ($orderStatus == 6) {
									$orderStatus = "已取消";
								}

								this.list.push({
									stuNo: $stuNo,
									index: $index,
									phone: $phone,
									bookDate: $bookDate,
									userName: $userName,
									identity: $identity,
									orderCode: $orderCode,
									venueName: $venueName,
									fieldName: $fieldName,
									orderStatus: $orderStatus
								});
							}
						}
					}
				});
			},
			//场馆列表
			getVenueList() {
				let url = this.$util.domain + "/erp/api/v20/tools/venuelist";
				this.venueLists = [{ venueId: 0, venueName: "全部场馆" }];

				this.$http({
					url,
					method: "GET"
				}).then(response => {
					if (response.data.error == 10000) {
						let resList = response.data.data;
						if (resList && resList.length > 0) {
							for (let i = 0; i < resList.length; i++) {
								let $venueId = resList[i].id,
									$venueName = resList[i].name;
								this.venueLists.push({
									venueId: $venueId,
									venueName: $venueName
								});
							}
						}
					}
				});
			},
			// 场地列表
			getFieldList(venueId) {
				if (this.$util.getUrlParam("venueId")) {
					venueId = this.$util.getUrlParam("venueId");
				}
				let url = this.$util.domain + "/erp/api/v20/tools/fieldlist";
				this.fieldLists = [{ fieldId: 0, fieldName: "全部场地" }];

				this.$http({
					url,
					method: "GET",
					params: {
						venueId: venueId
					}
				}).then(response => {
					if (response.data.error == 10000) {
						let fieList = response.data.data;
						if (fieList && fieList.length > 0) {
							for (let i = 0; i < fieList.length; i++) {
								let $id = fieList[i].id,
									$name = fieList[i].name;
								this.fieldLists.push({
									fieldId: $id,
									fieldName: $name
								});
							}
						}
					}
				});
			},
			// 更改时间
			changeBookDate() {
				let stime = this.bookDateStart.getTime();
				let etime = this.bookDateEnd.getTime();

				if (stime > etime) {
					this.$util.errorMsg("开始时间不能大于结束时间");
					return;
				}
			},
			// 更改场馆
			changeVenueHandle() {
				this.getFieldList(this.venueId);
				this.fieldId = 0;
			},

			// 搜索
			search() {
				this.getOrderList();
			},
			selectDetail(row) {
				let params = {
					status: this.status,
					venueId: this.venueId,
					fieldId: this.fieldId,
					orderCode: row.orderCode,
					currentPage: this.currentPage,
					bookDateEnd: this.bookDateEnd.getTime(),
					bookDateStart: this.bookDateStart.getTime(),
					keywords: String(this.keywords).trimLeft()
				}
				this.$util.refreshTo("/#/orderDetail", params);
			},
			//请求分页数据分页
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getOrderList();
			}
		}
	};
</script>

<style>
	#orderManage {
		padding-top: 60px;
		height: calc(100% - 100px);
	}

	#orderManage .el-table--enable-row-hover .el-table__body tr:hover>td {
		background-color: #f7fcff;
		cursor: pointer;
	}

	#orderManage .el-select {
		width: 25%;
	}

	#orderManage .list {
		height: calc(100% - 180px);
	}

	#orderManage .sel_btn {
		position: absolute;
		right: 25px;
		top: 13px;
		margin-top: 12px;
	}

	#orderManage .largeIn {
		width: 350px;
	}

	#orderManage .search {
		margin: 20px 30px;
		background: #ffffff;
		border-radius: 2px;
		height: 95px;
		padding: 25px;
		position: relative;
	}

	#orderManage .smallIn {
		width: 200px;
	}
</style>